<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">

            <h:form id="visualizarBairroForm" enctype="multipart/form-data">
                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" />

                <br/>
                <h3 class="title">Atualizar Bairro</h3>
                <p:growl id="messages" showDetail="true" autoUpdate="true"  /> 
                <p:panel id="personPanel" styleClass="container_24 clearfix both withoutBorder">
                    <h4 class="title">Dados Gerais</h4>

                    <p:outputLabel  value="Nome:" styleClass="grid_3"/>
                    <p:inputText id="nome" styleClass="grid_10"  readonly="true"
                                 value="#{managerPesquisarBairro.visualizarBairro.nome}" 
                                 required="true" requiredMessage="O campo nome é obrigatório" />
                    <div class="clear"/>

                    <p:outputLabel value="Cidade:" styleClass="grid_3"/>
                    <p:inputText styleClass="grid_10" readonly="true"
                                 value="#{managerPesquisarBairro.visualizarCidade.nome.concat(' - ').concat(managerPesquisarBairro.visualizarCidade.estado.sgl)}" />  

                    <div class="clear"/>

                </p:panel>
                <h4 class="title">Georreferenciamento</h4>

                <p:panel id="geoPanel" style="background: none; border: none;" 
                         styleClass="container_24 clearfix ">

                    <p:gmap id="map" center="#{managerPesquisarBairro.centroMapa}" 
                            zoom="#{managerPesquisarBairro.zoomLevelMapa}" type="HYBRID"   
                            style="width:97%;height:500px" model="#{managerPesquisarBairro.mapModel}" />
                </p:panel>
                <br/>

                <div class="buttonAction">
                    <p:button href="pesquisarbairro.xhtml" value="Voltar" 
                              icon="ui-icon-arrowreturnthick-1-w"/>
                </div>
            </h:form>

        </ui:define> 
    </ui:composition>
</html>
